﻿@page "/tests/tables"
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>BASIC EXAMPLE</CardTitle>
                <CardSubtitle>Basic table with lightly padded cells and horizontal dividers.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>STRIPED ROWS</CardTitle>
                <CardSubtitle>For alternating background colors on the rows, add <code>IsStriped</code> attribute.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer IsStriped="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>BORDERED TABLE</CardTitle>
                <CardSubtitle>For borders all around the table, use <code>IsBordered</code> attribute.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer IsBordered="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>HOVERABLE ROWS</CardTitle>
                <CardSubtitle>To achieve that "hover" effect when mousing over the table rows, use <code>IsHoverable</code> attribute.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer IsHoverable="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>BORDERLESS TABLE</CardTitle>
                <CardSubtitle>For table without any borders set the <code>IsBorderless</code> attribute.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer IsBorderless="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>SMALL TABLE</CardTitle>
                <CardSubtitle>Add <code>IsNarrow</code> to make tables more compact by cutting cell padding in half.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer IsNarrow="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>LIGHT HEADER</CardTitle>
                <CardSubtitle>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer>
                    <TableHeader ThemeContrast="ThemeContrast.Light">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>DARK HEADER</CardTitle>
                <CardSubtitle>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer>
                    <TableHeader ThemeContrast="ThemeContrast.Dark">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>CONTEXTUAL COLORS</CardTitle>
                <CardSubtitle>Use <code>Color</code> on table rows or individual cells.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Color="Color.Primary">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Success">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Info">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Warning">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Danger">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>CONTEXTUAL WITH BACKGROUND COLOR</CardTitle>
                <CardSubtitle>Use <code>Background</code> and <code>TextColor</code> on table rows or individual cells.</CardSubtitle>
            </CardHeader>
            <CardBody>
                <TableContainer>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Background="Background.Dark" TextColor="TextColor.White">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Success" TextColor="TextColor.White">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Info" TextColor="TextColor.White">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Warning" TextColor="TextColor.White">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Danger" TextColor="TextColor.White">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </TableContainer>
            </CardBody>
        </Card>
    </Column>
</Row>